import { h } from 'snabbdom'
import { DomEditor } from '@wangeditor/editor'

function renderFormula(elem, children, editor) {
  // 当前节点是否选中
  const selected = DomEditor.isNodeSelected(editor, elem)

  const { value = '' } = elem

  return h(
    'div',
    {
      props: {
        contentEditable: false // 不可编辑
      },
      style: {
        display: 'inline-block', // inline
        border: selected // 选中/不选中，样式不一样
          ? '2px solid var(--w-e-textarea-selected-border-color)'
          : '2px solid transparent'
      },
      on: {
        // 双击事件
        dblclick: () => {
          editor.emit('FormulaMenuClick', elem.value)
        }
        // click: () => {
        //   editor.emit('FormulaMenuClick', elem.value)
        // }
      }
    },
    [
      h(
        'wcs-formula',
        {
          dataset: { value }
        },
        null
      )
    ]
  )
}

const conf = {
  type: 'formula', // 节点 type ，重要！！！
  renderElem: renderFormula
}

export default conf
